<!-- 预警管理 -->
<template>
  <div class="systemPage-wrapper">
    <div class="topbar">
      <span class="iconfont iconxitongpingtai-yujingguanli"></span>
      <span>预警管理</span>
    </div>
    <div class="content-background content">
      <pageMenu
        :menuitems="menuitems"
        @itemclick="itemclick"
        @itemIconClick="itemclick"
        @add="add"
        :activeitem="activeitem"
        @change="search"
        :dropmenus="dropmenus"
        @dropitemclick="dropitemclick"
        @showMenu="showMenu"
      ></pageMenu>
      <roleSelection
        :remindId="form.id"
        v-if="showRole"
        @hide="treeCancel"
      ></roleSelection>
      <div class="page-warning-detail" v-if="showView">
        <div class="detail-header">
          <div class="header-left">
            <i></i>
            <span>预警管理</span>
          </div>
          <div class="header-right">
            <div class="buttons-wrapper" v-if="!editable">
              <span @click="save" class="systemButtonConfirm">保存</span>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="detail-content">
          <el-form
            :class="!editable ? 'deptOnlyRead systemForm' : 'systemForm'"
            ref="form"
            :model="form"
            label-width="75px"
            size="mini"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="预警名称:">
                  <el-input
                    v-model="form.name"
                    :disabled="editable"
                    class="systemInput"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否开启:">
                  <el-select
                    v-model="form.state"
                    placeholder="请选择"
                    :disabled="editable"
                    class="systemInput"
                  >
                    <el-option
                      v-for="item in stateOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否存在:">
                  <el-select
                    v-model="form.isExist"
                    placeholder="请选择"
                    :disabled="editable"
                    class="systemInput"
                  >
                    <el-option
                      v-for="item in isExistOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="时效类型:">
                  <el-select
                    v-model="form.timeType"
                    placeholder="请选择"
                    :disabled="editable"
                    class="systemInput"
                  >
                    <el-option
                      v-for="item in timeTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="提醒计划:">
                  <el-input
                    v-model="form.planTime"
                    placeholder="单位(天)"
                    :disabled="editable"
                    class="systemInput"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="提醒周期:">
                  <el-input
                    v-model="form.perTime"
                    placeholder="单位(天)"
                    :disabled="editable"
                    class="systemInput"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="提醒内容:">
                  <el-input
                    v-model="form.detail"
                    :disabled="editable"
                    class="systemInput"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row">
              <el-col class="row-left">
                <el-form-item label="提醒角色:">
                  <el-input
                    v-model="form.remindRole"
                    readonly
                    :disabled="editable"
                    class="systemInput"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col class="row-right">
                <i
                  :class="[
                    form.id && !editable
                      ? 'el-icon-more border'
                      : 'el-icon-more  disable',
                  ]"
                  @click="selectRole"
                ></i>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="提醒人员:">
                  <el-input
                    v-model="form.remindUser"
                    :disabled="editable"
                    class="systemInput"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="消息类型:">
                  <el-col :span="3" style="text-align: left">
                    <el-checkbox
                      systemCheckbox
                      v-model="isSms"
                      @change="changeSms"
                      :disabled="editable"
                      >短信</el-checkbox
                    >
                  </el-col>
                  <el-col :span="7" style="text-align: center">
                    <el-checkbox
                      systemCheckbox
                      v-model="isJpush"
                      :disabled="editable"
                      @change="changeJpush"
                      >极光推送</el-checkbox
                    >
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="提醒脚本:">
                  <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                  >
                    <el-menu-item index="0">检测脚本</el-menu-item>
                    <el-menu-item index="1">执行脚本</el-menu-item>
                    <el-menu-item index="2">过滤条件</el-menu-item>
                  </el-menu>
                  <el-input
                    v-if="index === '0'"
                    type="textarea"
                    :rows="9"
                    placeholder
                    resize="none"
                    v-model="form.planScript"
                    :disabled="editable"
                    class="systemInput"
                  ></el-input>
                  <el-input
                    v-if="index === '1'"
                    type="textarea"
                    :rows="13"
                    placeholder
                    resize="none"
                    v-model="form.runScript"
                    :disabled="editable"
                    class="systemInput"
                  ></el-input>
                  <el-input
                    v-if="index === '2'"
                    type="textarea"
                    :rows="13"
                    placeholder
                    resize="none"
                    v-model="form.filter"
                    :disabled="editable"
                    class="systemInput"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pageMenu from "../components/pageMenu.vue";
import roleSelection from "../components/remindRole.vue";
import {
  remindList,
  remindDetail,
  remindSave,
  remindDelete,
} from "@/system/api/remind";
export default {
  name: "earlyWarning",
  components: {
    pageMenu,
    roleSelection,
  },
  data() {
    return {
      disable: true,
      activeitem: -1,
      index: "0",
      showView: false,
      showRole: false,
      isExistOptions: [
        {
          value: 0,
          label: "否",
        },
        {
          value: 1,
          label: "是",
        },
      ],
      stateOptions: [
        {
          value: 1,
          label: "开启",
        },
        {
          value: 0,
          label: "禁用",
        },
      ],
      timeTypeOptions: [
        {
          value: 0,
          label: "提前提醒",
        },
        {
          value: 1,
          label: "推后提醒",
        },
      ],
      editable: false,
      isSms: false,
      isJpush: true,
      form: {
        id: "",
        name: "",
        state: 0,
        isExist: 1,
        timeType: 0,
        planTime: 0,
        perTime: 0,
        detail: "",
        remindUser: "",
        planScript: "",
        runScript: "",
        filter: "",
        remindRole: "",
        isSms: 0,
        isJpush: 0,
      },
      activeIndex: "0",
      queryList: {
        keyword: "",
        start: 0,
        limit: 10000,
      },
      menuitems: [],
      dropmenus: [
        {
          name: "编辑",
          iconPosition: "before",
          iconname: "editicon",
          value: 1,
        },
        {
          name: "删除",
          iconPosition: "before",
          iconname: "delicon",
          value: 2,
        },
      ],
    };
  },
  mounted: function () {
    this.getList();
  },
  methods: {
    changeJpush(e) {
      if (e) {
        this.isJpush = true;
      } else {
        this.isJpush = false;
      }
    },
    changeSms(e) {
      if (e) {
        this.isSms = true;
      } else {
        this.isSms = false;
      }
    },
    getList(data) {
      this.queryList.keyword = data;
      remindList(this.queryList).then((res) => {
        if (res.code == 200) {
          this.menuitems = res.info;
        }
      });
    },
    search(data) {
      this.queryList.keyword = data;
      this.activeitem = -1;
      this.showView = false;
      remindList(this.queryList).then((res) => {
        if (res.code == 200) {
          this.menuitems = res.info;
        }
      });
    },
    getDetail(id) {
      remindDetail({
        id: id,
      }).then((res) => {
        if (res.code == 200) {
          this.form = res.info;
          this.isJpush = Boolean(this.form.isJpush);
          this.isSms = Boolean(this.form.isSms);
        }
      });
    },
    itemclick(e, index) {
      let arr = [];
      this.menuitems.forEach(function (item, index) {
        arr.push(item.id);
      });
      this.activeitem = arr.indexOf(e.id);
      this.showView = true;
      this.form.id = e.id;
      this.getDetail(this.form.id);
      this.editable = true;
      // this.getRole(e.id)
    },
    selectRole() {
      if (!this.form.id || this.editable) {
        return;
      }
      this.showRole = true;
    },
    treeCancel() {
      this.showRole = false;
      this.getDetail(this.form.id);
      // this.getRole(this.remindId)
    },
    //tabs切换
    handleSelect(key, keyPath) {
      this.index = key;
    },
    add() {
      this.showView = true;
      //初始化
      (this.form = {
        id: "",
        name: "",
        state: 1,
        isExist: 1,
        timeType: 0,
        planTime: 0,
        perTime: 0,
        detail: "",
        remindUser: "",
        planScript: "",
        runScript: "",
        filter: "",
        remindRole: "",
      }),
        (this.activeitem = -1);
      this.editable = false;
    },
    //右击弹出菜单删除
    dropitemclick(parentItem, dropItem, index) {
      this.showRole = false;
      if (dropItem.name === "删除") {
        this.del(parentItem);
      } else {
        this.editable = false;
        this.getDetail(parentItem.id);
      }
    },
    showMenu() {
      this.showRole = false;
    },
    //删除方法
    del(e) {
      this.messageBox("确认删除？").then((c) => {
        if (c.action) {
          remindDelete({
            id: e.id,
          }).then((res) => {
            if (res.code == 200) {
              this.message("删除成功！", 1);
              this.search();
            } else {
              this.message(res.info, 3);
            }
          });
        }
      });
    },
    save() {
      if (this.editable) {
        return;
      }
      if (!this.form.name) {
        this.message("预警名称不能为空！", 3);
        return false;
      }
      if (this.form.planTime) {
        if (!this.checkPlantime(this.form.planTime)) {
          this.message("提醒计划应为数字型，请重填", 3);
          return;
        }
      }
      if (this.form.perTime) {
        if (!this.checkPerTime(this.form.perTime)) {
          this.message("提醒周期应为数字型，请重填", 3);
          return;
        }
      }
      this.form.isJpush = Number(this.isJpush);
      this.form.isSms = Number(this.isSms);
      remindSave(this.form).then((res) => {
        if (res.code == 200) {
          this.message("保存成功！", 1);
          this.getList();
          setTimeout(() => {
            if (!this.form.id) {
              this.itemclick(
                this.menuitems[this.menuitems.length - 1],
                this.menuitems.length - 1
              );
            } else {
              this.itemclick(this.form, this.index);
            }
            this.editable = false;
          }, 200);
        } else {
          this.message(res.msg, 3);
        }
      });
    },
    // 提醒计划校验
    checkPlantime(plantime) {
      var myreg = new RegExp("^[0-9]*$");
      if (!myreg.test(plantime)) {
        return false;
      } else {
        return true;
      }
    },
    // 周期校验
    checkPerTime(perTime) {
      var myreg = new RegExp("^[0-9]*$");
      if (!myreg.test(perTime)) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped>
.center {
  width: 100%;
  height: calc(100% - 42px);
}

.page-warning {
  width: 100%;
  height: 100%;
}

.content {
  display: flex;
  flex-direction: row;
}

/* .content .page-menu{
		width: 234px;
	} */
.page-warning-detail {
  margin-left: 12px;
  width: 100%;
  border: 1px solid var(--system-page-content-border-color);
  background: var(--system-page-content-bgc);
  border-radius: 6px;
  position: relative;
}

.detail-header {
  margin: 12px 21px 12px 16px;
  height: 28px;
  line-height: 28px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.header-left {
  font-size: 16px;
}

.header-left i {
  width: 4px;
  height: 20px;
  line-height: 20px;
  border-right: 4px solid rgba(83, 168, 255, 1);
  background: #53a8ff;
  border-radius: 2px;
}

.header-left span {
  margin-left: 8px;
  width: 69px;
  height: 16px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: var(--system-page-topbar-text-color);
}

.line {
  height: 0.5px;
  border: 0.5px solid rgba(197, 208, 216, 1);
  margin: 0px 20px 0px 16px;
}

.detail-content {
  display: flex;
  justify-content: center;
  flex: 1;
  height: calc(100% - 53px);
  min-width: 800px;
  overflow-x: auto;
}

.systemForm {
  display: flex;
  flex-direction: column;
  padding: 40px 142px 18px 142px;
  width: 100%;
}

.page-warning ::-webkit-scrollbar {
  height: 3px;
  width: 3px;
}

.row {
  display: flex;
}

.row-left {
  flex: 1;
}

.row-right {
  width: 48px;
}

.border {
  margin-left: 8px;
  display: inline-block;
  border-radius: 4px;
  background: rgba(244, 246, 249, 0);
  border: 1px solid var(--button-border-color);
  width: 40px;
  height: 28px;
  line-height: 28px;
  margin-top: 3px;
  color: var(--input-focus-border-color);
  text-align: center;
}

.border:hover {
  background: rgba(244, 246, 249, 1);
  border: 1px solid var(--input-focus-border-color);
  cursor: pointer;
}

.border:active {
  border: 1px solid var(--input-focus-border-color);
  cursor: pointer;
}

.disable {
  margin-left: 8px;
  display: inline-block;
  border-radius: 4px;
  background: rgba(244, 246, 249, 0);
  border: 1px solid var(--button-border-color);
  width: 40px;
  height: 28px;
  line-height: 28px;
  margin-top: 3px;
  text-align: center;
  color: var(--checkBox-disable-back-color);
}

>>> .systemForm {
  padding-left: 103px;
}
>>> .systemForm .el-form-item {
  margin-bottom: 24px;
  margin-left: 39px;
}
>>> .systemForm .el-menu {
  background-color: transparent !important;
  color: var(--system-form-text-color) !important;
}

>>> .systemForm .el-menu--horizontal > .el-menu-item {
  background-color: transparent !important;
  color: var(--system-form-text-color) !important;
  height: 32px;
  line-height: 32px;
}

>>> .systemForm .el-menu.el-menu--horizontal {
  border: none;
  height: 32px;
}
</style>
<style>
/* .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background: rgba(255, 255, 255, 0);
} */
</style>
